<template>
  <div class="appointment-detail-container">
    <div class="page-header">
      <h2>预约详情</h2>
    </div>
    
    <div v-loading="loading">
      <el-card class="detail-card" v-if="appointment.id">
        <div slot="header">
          <span>基本信息</span>
          <el-tag 
            class="status-tag" 
            :type="getStatusType(appointment.status)">
            {{ getStatusText(appointment.status) }}
          </el-tag>
        </div>
        
        <div class="info-section">
          <div class="info-item">
            <span class="label">预约编号：</span>
            <span>{{ appointment.id }}</span>
          </div>
          <div class="info-item">
            <span class="label">创建时间：</span>
            <span>{{ formatDateTime(appointment.createdTime) }}</span>
          </div>
          <div class="info-item">
            <span class="label">更新时间：</span>
            <span>{{ formatDateTime(appointment.updatedTime) }}</span>
          </div>
        </div>
      </el-card>
      
      <el-row :gutter="20" class="detail-row" v-if="appointment.id">
        <!-- 服务信息 -->
        <el-col :span="12">
          <el-card class="detail-card">
            <div slot="header">
              <span>服务信息</span>
            </div>
            <div class="info-section">
              <div class="info-item">
                <span class="label">服务名称：</span>
                <span>{{ appointment.serviceName }}</span>
              </div>
              <div class="info-item">
                <span class="label">服务类别：</span>
                <span>{{ appointment.serviceCategory }}</span>
              </div>
              <div class="info-item">
                <span class="label">价格：</span>
                <span class="price">¥{{ appointment.price }}</span>
              </div>
              <div class="info-item">
                <span class="label">时长：</span>
                <span>{{ appointment.duration }}分钟</span>
              </div>
              <div class="info-item">
                <span class="label">预约时间：</span>
                <span>{{ formatDateTime(appointment.appointmentTime) }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <!-- 宠物信息 -->
        <el-col :span="12">
          <el-card class="detail-card">
            <div slot="header">
              <span>宠物信息</span>
            </div>
            <div class="info-section">
              <div class="info-item">
                <span class="label">宠物名称：</span>
                <span>{{ appointment.petName }}</span>
              </div>
              <div class="info-item">
                <span class="label">宠物类别：</span>
                <span>{{ appointment.petCategory }}</span>
              </div>
              <div class="info-item">
                <span class="label">品种：</span>
                <span>{{ appointment.petBreed }}</span>
              </div>
              <div class="info-item">
                <span class="label">年龄：</span>
                <span>{{ appointment.petAge }}岁</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 备注信息 -->
      <el-card class="detail-card remark-card" v-if="appointment.id">
        <div slot="header">
          <span>备注信息</span>
        </div>
        <div class="remark-content">
          {{ appointment.remark || '暂无备注' }}
        </div>
      </el-card>
      
      <!-- 操作按钮 -->
      <div class="action-bar" v-if="appointment.id">
        <el-button @click="goBack">返回列表</el-button>
        <el-button 
          v-if="canCancel" 
          type="danger" 
          @click="handleCancel">
          取消预约
        </el-button>
      </div>
    </div>
    
    <!-- 取消预约确认框 -->
    <el-dialog
      title="取消预约"
      :visible.sync="cancelDialogVisible"
      width="400px">
      <p>确定要取消此预约吗？</p>
      <p class="warning-text">取消后不可恢复，请谨慎操作。</p>
      <div slot="footer">
        <el-button @click="cancelDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmCancel" :loading="cancelLoading">确定取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAppointmentDetail, cancelAppointment } from '@/api/service'
import { formatDateTime } from '@/utils/date'

export default {
  name: 'AppointmentDetail',
  data() {
    return {
      loading: false,
      appointment: {},
      cancelDialogVisible: false,
      cancelLoading: false
    }
  },
  computed: {
    appointmentId() {
      return this.$route.params.id
    },
    canCancel() {
      return this.appointment.status === 'PENDING' || this.appointment.status === 'CONFIRMED'
    }
  },
  created() {
    this.fetchAppointmentDetail()
  },
  methods: {
    formatDateTime,
    async fetchAppointmentDetail() {
      if (!this.appointmentId) return
      
      try {
        this.loading = true
        const response = await getAppointmentDetail(this.appointmentId)
        
        if (response.code === 200) {
          this.appointment = response.data
        } else {
          this.$message.error(response.message || '获取预约详情失败')
        }
      } catch (error) {
        console.error('获取预约详情失败:', error)
        this.$message.error('获取预约详情失败')
      } finally {
        this.loading = false
      }
    },
    
    getStatusText(status) {
      const statusMap = {
        'PENDING': '待确认',
        'CONFIRMED': '已确认',
        'COMPLETED': '已完成',
        'CANCELLED': '已取消'
      }
      return statusMap[status] || status
    },
    
    getStatusType(status) {
      const typeMap = {
        'PENDING': 'warning',
        'CONFIRMED': 'primary',
        'COMPLETED': 'success',
        'CANCELLED': 'info'
      }
      return typeMap[status] || ''
    },
    
    goBack() {
      this.$router.push('/main/my-appointments')
    },
    
    handleCancel() {
      this.cancelDialogVisible = true
    },
    
    async confirmCancel() {
      try {
        this.cancelLoading = true
        const response = await cancelAppointment(this.appointmentId)
        
        if (response.code === 200) {
          this.$message.success('取消预约成功')
          this.cancelDialogVisible = false
          this.fetchAppointmentDetail()
        } else {
          this.$message.error(response.message || '取消预约失败')
        }
      } catch (error) {
        console.error('取消预约失败:', error)
        this.$message.error('取消预约失败，请稍后再试')
      } finally {
        this.cancelLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.appointment-detail-container {
  padding: 20px;
  
  .page-header {
    margin-bottom: 20px;
    
    h2 {
      font-size: 22px;
      color: #333;
      margin: 0;
    }
  }
  
  .detail-card {
    margin-bottom: 20px;
    
    .status-tag {
      float: right;
    }
  }
  
  .detail-row {
    margin-bottom: 0;
  }
  
  .info-section {
    .info-item {
      margin-bottom: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        font-weight: bold;
        color: #606266;
        margin-right: 8px;
      }
      
      .price {
        color: #f56c6c;
        font-weight: bold;
      }
    }
  }
  
  .remark-card {
    .remark-content {
      min-height: 60px;
      color: #606266;
      white-space: pre-wrap;
    }
  }
  
  .action-bar {
    margin-top: 30px;
    text-align: center;
  }
  
  .warning-text {
    color: #E6A23C;
    font-size: 14px;
  }
}
</style> 